<template>
  <div class="content">
    <img class="smile" src="../static/smiling_face@3x.png" alt="" />
    <div class="tips">哇，点赞完成，您已获得心愿礼～</div>
    <div class="heart-btn">去领心愿礼</div>
    <img class="close" src="../static/icon_close@3x.png" alt="" />
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/sass/mixin.scss';
@import '../assets/sass/reset.scss';
@import '../assets/sass/_variable.scss';
.content {
  width: rem(702);
  height: rem(88);
  position: fixed;
  bottom: rem(65);
  left: 50%;
  transform: translate(-50%);
  background: rgba($color: #000000, $alpha: 0.7);
  border-radius: rem(63);
  display: flex;
  align-items: center;
  // position: relative;
  margin: 0 auto;
  .smile {
    position: absolute;
    width: rem(110);
    height: rem(110);
    bottom: 0;
    left: 0;
    opacity: 2;
  }
  .tips {
    font-size: rem(26);
    margin-left: rem(102);
    color: #ffffff;
  }
  .heart-btn {
    width: rem(158);
    height: rem(60);
    background: linear-gradient(0deg, #fa1f42 0%, #ffae8b 100%);
    border-radius: rem(40);
    font-size: rem(24);
    color: #ffffff;
    text-align: center;
    line-height: rem(60);
    margin-left: rem(28);
  }
  .close {
    position: absolute;
    top: rem(-55);
    right: 0;
    width: rem(36);
    height: rem(36);
  }
}
</style>
